import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import CustomTabBar from '../../components/CustomTabBar'
import './fw.scss'

export default function FwPage() {
  // 服务轮播图数据
  const serviceBanners = [
    {
      id: 1,
      image: 'https://example.com/service-banner1.jpg',
      title: '专业维修服务',
      subtitle: '快速响应，专业解决',
      tag: '24小时在线'
    },
    {
      id: 2,
      image: 'https://example.com/service-banner2.jpg',
      title: '上门服务',
      subtitle: '足不出户，享受服务',
      tag: '免费上门'
    },
    {
      id: 3,
      image: 'https://example.com/service-banner3.jpg',
      title: '品质保障',
      subtitle: '原厂配件，质量保证',
      tag: '质保一年'
    }
  ]

  // 服务分类数据
  const serviceCategories = [
    { id: 1, name: '手机维修', icon: '📱', color: '#4CAF50' },
    { id: 2, name: '电脑维修', icon: '💻', color: '#2196F3' },
    { id: 3, name: '家电维修', icon: '🏠', color: '#FF9800' },
    { id: 4, name: '数码维修', icon: '📷', color: '#9C27B0' },
    { id: 5, name: '网络服务', icon: '🌐', color: '#00BCD4' },
    { id: 6, name: '数据恢复', icon: '💾', color: '#607D8B' }
  ]

  // 热门服务数据
  const hotServices = [
    {
      id: 1,
      name: 'iPhone屏幕更换',
      price: '¥299起',
      rating: 4.8,
      orders: 1234,
      image: 'https://example.com/iphone-screen.jpg'
    },
    {
      id: 2,
      name: '笔记本清灰保养',
      price: '¥99起',
      rating: 4.9,
      orders: 856,
      image: 'https://example.com/laptop-clean.jpg'
    },
    {
      id: 3,
      name: '空调清洗维修',
      price: '¥199起',
      rating: 4.7,
      orders: 567,
      image: 'https://example.com/ac-repair.jpg'
    }
  ]

  // 服务资讯数据
  const serviceNews = [
    {
      id: 1,
      title: '夏季空调保养小贴士',
      content: '夏季来临，空调使用频繁，如何正确保养空调？',
      time: '2024-06-14',
      views: 1234
    },
    {
      id: 2,
      title: '手机进水急救指南',
      content: '手机进水不要慌，这些急救方法能帮你',
      time: '2024-06-13',
      views: 987
    }
  ]

  // 处理服务分类点击
  const handleCategoryClick = (category) => {
    Taro.navigateTo({
      url: `/pages/FJ/fj?category=${category.name}`
    })
  }

  // 处理热门服务点击
  const handleServiceClick = (service) => {
    Taro.navigateTo({
      url: `/pages/Pay/Pay?service=${service.name}`
    })
  }

  // 处理轮播图点击
  const handleBannerClick = (banner) => {
    Taro.showToast({
      title: `查看${banner.title}`,
      icon: 'none'
    })
  }

  return (
    <View className="fw-page">
      {/* 顶部导航 */}
      <View className="header">
        <Text className="title">服务大厅</Text>
        <View className="icons">
          <Text className="icon" onClick={() => Taro.navigateBack()}>←</Text>
          <Text className="icon">🔍</Text>
          <Text className="icon">📞</Text>
          <Text className="icon">👤</Text>
        </View>
      </View>

      {/* 服务轮播图区域 */}
      <View className="banner-container">
        <Swiper
          className="banner-swiper"
          indicatorColor="#999"
          indicatorActiveColor="#333"
          circular
          autoplay
          interval={3000}
          indicatorDots
        >
          {serviceBanners.map(banner => (
            <SwiperItem key={banner.id} onClick={() => handleBannerClick(banner)}>
              <View className="banner-item" style={{ backgroundImage: `url(${banner.image})` }}>
                <View className="banner-content">
                  <Text className="banner-title">{banner.title}</Text>
                  <Text className="banner-subtitle">{banner.subtitle}</Text>
                  <Text className="banner-tag">{banner.tag}</Text>
                </View>
              </View>
            </SwiperItem>
          ))}
        </Swiper>
      </View>

      {/* 服务分类区域 */}
      <View className="categories-section">
        <Text className="section-title">服务分类</Text>
        <View className="categories-grid">
          {serviceCategories.map(category => (
            <View 
              key={category.id} 
              className="category-item"
              onClick={() => handleCategoryClick(category)}
            >
              <View className="category-icon" style={{ backgroundColor: category.color }}>
                {category.icon}
              </View>
              <Text className="category-name">{category.name}</Text>
            </View>
          ))}
        </View>
      </View>

      {/* 热门服务区域 */}
      <View className="hot-services-section">
        <Text className="section-title">热门服务</Text>
        <View className="services-list">
          {hotServices.map(service => (
            <View 
              key={service.id} 
              className="service-item"
              onClick={() => handleServiceClick(service)}
            >
              <Image src={service.image} mode="aspectFill" className="service-image" />
              <View className="service-info">
                <Text className="service-name">{service.name}</Text>
                <View className="service-meta">
                  <Text className="service-price">{service.price}</Text>
                  <Text className="service-rating">⭐ {service.rating}</Text>
                </View>
                <Text className="service-orders">已服务 {service.orders} 次</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      {/* 服务资讯区域 */}
      <View className="news-section">
        <Text className="section-title">服务资讯</Text>
        <View className="news-list">
          {serviceNews.map(news => (
            <View key={news.id} className="news-item">
              <View className="news-header">
                <Text className="news-title">{news.title}</Text>
                <Text className="news-time">{news.time}</Text>
              </View>
              <Text className="news-content">{news.content}</Text>
              <Text className="news-views">阅读 {news.views}</Text>
            </View>
          ))}
        </View>
      </View>

      {/* 快速联系区域 */}
      <View className="contact-section">
        <View className="contact-item" onClick={() => Taro.makePhoneCall({ phoneNumber: '400-123-4567' })}>
          <Text className="contact-icon">📞</Text>
          <Text className="contact-text">电话咨询</Text>
        </View>
        <View className="contact-item" onClick={() => Taro.navigateTo({ url: '/pages/login/login' })}>
          <Text className="contact-icon">💬</Text>
          <Text className="contact-text">在线客服</Text>
        </View>
      </View>
      
      {/* 自定义TabBar */}
      <CustomTabBar />
    </View>
  )
}
